<template>
	<view class="page tab-page">
		<nav-header custom-nav :title="company && company.companyName || ''" rightIcon="add-circle">
			<template v-slot:right>
				<view class="nav-more" @click="dropMenuVisible = !dropMenuVisible">
					<uni-icons type="plus" size="32"></uni-icons>
					<drop-menu @action="action" :list="menuList" v-model="dropMenuVisible" />
				</view>
			</template>
		</nav-header>
		<div class="mask" v-if="showHidden" @click="showHidden = false"></div>
		<view class="tab-panel" v-if="tabActive == '群聊'">
			<view v-if="loading" class="chat-loading">
				<loading :size="50" :mask="false">
					<view>消息接收中...</view>
				</loading>
			</view>
			<scroll-view class="scroll-bar" v-else scroll-with-animation="true" scroll-y="true">
				<uni-search-bar v-model="searchText" cancelButton="none" radius="100" placeholder="搜索"></uni-search-bar>
				<chat-panel :chat-list="chatList" :is-company="true"
					:source-type="$enums.privateMessageType.COMPANY"></chat-panel>
			</scroll-view>
		</view>



		<view class="tab-panel" v-else-if="tabActive == '企业管理'">
			<BusinessManage :companyId="companyId" :isAdmin="isAdmin" />
		</view>

		<view class="tab-panel" v-else-if="tabActive == '通讯录'">
			<BuSinessWorkFriend :companyId="companyId"  />
		</view>
		<!-- <view class="tab-panel" v-else-if="tabActive=='组织架构'">
			<StructurePanel :companyId="companyId" />
		</view> -->

		<!-- 固定在底部的 tabs -->
		<view class="tabs-container">
			<up-tabs class="tabs" :list="tabs" :scrollable="false" lineColor="#17B26A" @click="tabsCheck"></up-tabs>
		</view>
	</view>
</template>

<script>
	import chatStore from '@/store/chatStore.js'
	import BusinessManage from './components/business-manage'
	import BuSinessWorkFriend from './components/business-work-friend'

	export default {
		components: {
			BusinessManage,
			BuSinessWorkFriend
		},
		data() {
			return {
				showHidden: false,
				companyId: null,
				company: null,
				location: null,
				isAdmin:false,
				dropMenuVisible: false,
				tabActive: "群聊",
				tabs: [{
						name: '群聊'
					},
					{
						name: '通讯录'
					}, {
						name: '企业管理'
					},
				],
				menuList: [{
						icon: 'Default-5',
						text: '企业内搜索'
					},
					// {
					// 	icon: 'Default-6',
					// 	text: '发放工作号'
					// },
					// {
					// 	icon: 'De',
					// 	text: '收回工作号'
					// },{
					// 	icon: 'Default-1',
					// 	text: '我的名片'
					// },
					// {
					// 	icon: 'code2',
					// 	text: '工作二维码'
					// }
				],
				searchText: ""
			};
		},
		computed: {
			chatList() {
				this.chatStore.resetCompanyChats(this.companyId)
				console.log(this.chatStore.resetCompanyChats(this.companyId),1)
				return this.chatStore.companyChats.filter(e => e.showName && e.showName.includes(this.searchText))
			},
			unreadCount() {

				let count = 0;
				this.chatStore.chats.forEach(chat => {
					if (!chat.delete) {
						count += chat.unreadCount;
					}
				})
				return count;
			},
			loading() {
				return this.chatStore.loadingGroupMsg || this.chatStore.loadingPrivateMsg;
			},
			addressInfo() {
				return this.chatStore.addressInfo;
			}
		},
		methods: {
			tabsCheck(item) {
				this.tabActive = item.name
			},
			action(i, item) {

				const text = item.text
				switch (text) {
					case "企业内搜索":
						// 搜索
						uni.navigateTo({
							url: "/pageSubOne/business-chat/business-search"
						})
						break;
					case "发放工作号":
						// 发放工作号
						uni.navigateTo({
							url: "/pageSubOne/business-chat/business-number-get?companyId=" + this.companyId
						})
						break;
					case "收回工作号":
						// 收回工作号
						uni.navigateTo({
							url: "/pageSubOne/business-chat/business-number-back?companyId=" + this.companyId
						})
						break;
					case "我的名片":
						// 我的名片
						uni.navigateTo({
							url: "/pageSubOne/business-chat/business-card?companyId=" + this.companyId
						})
						break;
				}
			},
			scanCode() {
				// Implement scan code functionality
			},

			getData(companyId) {
				this.$http({
					url: `/company/staff/isAdmin?companyId=${companyId}`,
					method: 'GET'
				}).then(res => {
					this.isAdmin = res
					if (res) {
						this.menuList.push({
							icon: 'Default-6',
							text: '发放工作号'
						}, {
							icon: 'De',
							text: '收回工作号'
						})
					}
				});

				// 判断是否是工作号
				this.$http({
					url: `/job/existence/${companyId}`,
					method: 'GET'
				}).then(res => {
					if (res) {
						console.log("有会员号")

						this.menuList.push({
							icon: 'Default-1',
							text: '我的名片'
						})
					}
				});
			}
		},
		onShow() {
			uni.setStorageSync('location', this.chatStore.addressInfo);
			this.location = uni.getStorageSync('location');
		},
		onLoad(options) {
			this.companyId = parseInt(options.businessId)
			this.companyStore.loadCompany().then(res => {
				const filters = res.filter(e => e.id == this.companyId);
				if (filters.length === 0) {
					uni.showModal({
						content: "公司不存在"
					});
					uni.navigateBack(-1);
				}
				this.company = filters[0];
			})

			this.$http({
				method: "GET",
				url: "/company/listGroup",
				data: {
					companyId: this.companyId
				}
			}).then(res => {
				res.forEach(e => {
					const chatInfo = {
						type:"GROUP",
						targetId:e.id
					}
					this.chatStore.openChat(chatInfo)
					const idx = this.chatStore.findChatIdx({
						type: "GROUP",
						id: e.id
					})
					this.chatStore.updateOriginalDataByIdx(idx, e)
				})
			})

			this.getData(options.businessId)
		}
	};
</script>

<style scoped lang="scss">
	.tab-page {
		position: relative;
		display: flex;
		flex-direction: column;

		.tab-panel {
			min-height: 90vh;
		}

		.mask {
			// background-color: #000;
			// opacity: 0.3;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1
		}


		.chat-tip {
			position: absolute;
			top: 400rpx;
			padding: 50rpx;
			line-height: 50rpx;
			text-align: left;
			color: darkblue;
			font-size: 30rpx;
		}

		.more-qun {
			font-size: 24rpx;
			text-align: right;
			color: #3b82f6;
		}

		.scroll-bar {
			flex: 1;
			height: 100%;
		}
	}

	:deep(.u-tabbar__content__item-wrapper) {
		align-items: center;

		.u-tabbar-item {
			position: relative;
		}

		.u-tabbar-item::after {
			content: '';
			width: 1rpx;
			height: 60%;
			background-color: #f1f1f1;
			position: absolute;
			right: 0;
		}
	}

	.tabs-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding-bottom: 42rpx;
		background-color: #fff;
		/* 背景色可以根据需要调整 */
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
		/* 添加阴影效果 */
		z-index: 100;
		/* 确保 tabs 在内容之上 */
	}
</style>